<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/start' }">企业后台</el-breadcrumb-item>
      <el-breadcrumb-item>公司职位管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
        <!-- 搜索框 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            placeholder="请输入检索序号进行搜索"
            v-model="input"
            clearable
            size="medium"
          >
            <el-button
              type="primary"
              slot="append"
              icon="el-icon-search"
              @click="search()"
            ></el-button>
          </el-input>
        </el-col>
        <!-- 新增按钮 -->
        <el-col :span="2">
          <el-button type="primary" @click="adds()" icon="el-icon-circle-plus"
            >新增</el-button
          >
        </el-col>
        <!-- 发布按钮 -->
        <el-col :span="4">
          <el-button type="primary" icon="el-icon-circle-plus" @click="subs()"
            >发布</el-button
          >
        </el-col>
      </el-row>

      <!-- 用户列表区域 -->
      <el-table :data="tableData" stripe style="width: 100%" border stripe>
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="number" label="检索序号"> </el-table-column>
        <el-table-column prop="status" label="状态"> </el-table-column>
        <el-table-column prop="name" label="职位名称"> </el-table-column>
        <el-table-column prop="department" label="公司部门"> </el-table-column>
        <el-table-column prop="address" label="工作地址"> </el-table-column>
        <el-table-column prop="city" label="发布城市"> </el-table-column>
        <el-table-column prop="time" label="发布时间"> </el-table-column>
        <el-table-column prop="end" label="结束时间"> </el-table-column>
        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-button
              type="success"
              icon="el-icon-edit"
              @click="sets(scope.row)"
              size="mini"
              >修改</el-button
            >
            <!-- 删除 -->
            <el-button
              type="danger"
              @click="removes(scope.row)"
              size="mini"
              icon="el-icon-delete"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加弹出框 -->
      <el-dialog title="新增职位" :visible.sync="el_show">
        <el-form>
          <el-form-item label="检索序号" :label-width="formLabelWidth">
            <el-input
              placeholder="请输入序号"
              v-model="number"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth">
            <el-input
              placeholder="请输入状态"
              v-model="status"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="职位名称" :label-width="formLabelWidth">
            <el-input
              v-model="name"
              autocomplete="off"
              placeholder="请输入职位名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="公司部门" :label-width="formLabelWidth">
            <el-input
              v-model="department"
              autocomplete="off"
              placeholder="请输入公司部门"
            ></el-input>
          </el-form-item>
          <el-form-item label="工作地址" :label-width="formLabelWidth">
            <el-input
              placeholder="请输入工作地址"
              v-model="address"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="发布城市" :label-width="formLabelWidth">
            <el-input
              placeholder="请输入发布城市"
              v-model="position"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="发布时间" :label-width="formLabelWidth">
            <el-input
              placeholder="请输入发布时间"
              v-model="time"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="结束时间" :label-width="formLabelWidth">
            <el-input
              placeholder="请输入结束时间"
              v-model="end"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="pushs()">新 增</el-button>
          <el-button @click="err()">取 消</el-button>
        </div>
      </el-dialog>

      <!-- 修改弹出框 -->
      <el-dialog title="修改职位" :visible.sync="el_xiu">
        <el-form>
          <el-form-item label="状态" :label-width="formLabelWidth">
            <el-input
              placeholder="请输入状态"
              v-model="newtable.status"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="职位名称" :label-width="formLabelWidth">
            <el-input v-model="newtable.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="公司部门" :label-width="formLabelWidth">
            <el-input
              v-model="newtable.department"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="工作地址" :label-width="formLabelWidth">
            <el-input v-model="newtable.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="发布城市" :label-width="formLabelWidth">
            <el-input v-model="newtable.city" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="发布时间" :label-width="formLabelWidth">
            <el-input v-model="newtable.time" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="结束时间" :label-width="formLabelWidth">
            <el-input v-model="newtable.end" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="trueset()">修 改</el-button>
          <el-button @click="xg_err()">取 消</el-button>
        </div>
      </el-dialog>

      <!-- 发布弹出框 -->
      <el-dialog title="发布职位" :visible.sync="el_sub">
        <el-form :inline="true" :model="formInline" label-width="100px">
          <!-- 发布在 -->
          <el-form-item label="发布在">
            <el-select v-model="formInline.city" placeholder="北京">
              <el-option label="北京" value="beijing"></el-option>
              <el-option label="上海" value="shanghai"></el-option>
              <el-option label="江苏" value="jiangsu"></el-option>
              <el-option label="四川" value="sichuan"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="formInline.part" placeholder="全职招聘">
              <el-option label="全职招聘" value="all"></el-option>
              <el-option label="兼职" value="jianzhi"></el-option>
            </el-select>
          </el-form-item>
          <!-- 中间表格 -->
          <el-card>
            <el-form :inline="true" label-width="100px">
              <el-form-item label="职位标题">
                <el-input v-model="formInline.name"></el-input>
              </el-form-item>
              <el-form-item label="职位类别">
                <el-input v-model="formInline.type"></el-input>
              </el-form-item>
              <el-form-item label="招聘人数">
                <el-input v-model="formInline.people"></el-input>
              </el-form-item>
              <el-form-item label="学历">
                <el-select v-model="formInline.xueli" placeholder="本科">
                  <el-option label="专科" value="zhunake"></el-option>
                  <el-option label="本科" value="benke"></el-option>
                  <el-option label="硕士" value="shuoshi"></el-option>
                  <el-option label="博士" value="boshi"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="工作年限">
                <el-input v-model="formInline.nainxian"></el-input>
              </el-form-item>
              <el-form-item label="年龄">
                <el-input v-model="formInline.age"></el-input>
              </el-form-item>
              <el-form-item label="月薪">
                <el-input v-model="formInline.money"></el-input>
              </el-form-item>
              <el-form-item label="工作时间">
                <el-input v-model="formInline.time"></el-input>
              </el-form-item>
            </el-form>
          </el-card>
          <!-- <el-form-item>
            <el-radio v-model="radio" label="1">男</el-radio>
            <el-radio v-model="radio" label="2">女</el-radio>
          </el-form-item> -->
          <div style="margin: 20px 0"></div>
          <el-form-item label="职位责任">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入内容"
              v-model="formInline.textarea1"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="任职要求">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入内容"
              v-model="formInline.textarea2"
            >
            </el-input>
          </el-form-item>

          <el-form-item label="技能标签">
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="IOS"></el-checkbox>
              <el-checkbox label="JAVA"></el-checkbox>
              <el-checkbox label="PYTHON"></el-checkbox>
              <el-checkbox label=".NET"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="福利">
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="五险一金"></el-checkbox>
              <el-checkbox label="交通补助"></el-checkbox>
              <el-checkbox label="住房补助"></el-checkbox>
              <el-checkbox label="年底双薪"></el-checkbox>
              <el-checkbox label="话费补助"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>

        <div>
          <el-button type='primary' :plain="true" @click="open1">保存</el-button>
          <el-button type="success" :plain="true" @click="open2">发布</el-button>
        </div>
        </el-form>
      </el-dialog>

      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 15]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="5"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
function getBase64(img, callback) {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}
export default {
  data() {
    return {
      // 发布
      checkList:[],
      formInline: {
        // beijing:'',
        // shanghai:'',
        // jiangsu:'',
        // sichuang:'',
        city: '',
        part: '',
        name: '',
        type: '',
        people: '',
        xueli: '',
        nainxian: '',
        age: '',
        money: '',
        time: '',
        zeren: '',
        textarea1: '',
        textarea2:'',
      },
      radio: {
        radio: '1',
        lable: '1',
      },
      input: {
        input: '',
      },
      // 发布
      searchs: [],
      input: null,
      // 查找列表
      searchtableData: [
        {
          number: '2020123101',
          status: '发布中',
          name: '销售',
          department: '销售部',
          address: '上海',
          city: '上海',
          time: '2020-12-31',
          end: '2021-02-31',
        },
        {
          number: '2020123102',
          status: '已发布',
          name: 'Java工程师',
          department: '技术部',
          address: '北京',
          city: '上海',
          time: '2020-12-31',
          end: '2021-02-31',
        },
        {
          number: '2020123103',
          status: '发布中',
          name: '销售',
          department: '销售部',
          address: '北京',
          city: '北京',
          time: '2020-12-31',
          end: '2021-02-31',
        },
        {
          number: '2020123104',
          status: '发布中',
          name: '销售',
          department: '销售部',
          address: '上海',
          city: '上海',
          time: '2020-12-31',
          end: '2021-02-31',
        },
        {
          number: '2020123105',
          status: '发布中',
          name: '销售',
          department: '销售部',
          address: '上海',
          city: '上海',
          time: '2020-12-31',
          end: '2021-02-31',
        },
      ],
      // 显示列表
      tableData: [
        {
          number: '2020123101',
          status: '发布中',
          name: '销售',
          department: '销售部',
          address: '上海',
          city: '上海',
          time: '2020-12-31',
          end: '2021-02-31',
        },
        {
          number: '2020123102',
          status: '已发布',
          name: 'Java工程师',
          department: '技术部',
          address: '北京',
          city: '上海',
          time: '2020-12-31',
          end: '2021-02-31',
        },
        {
          number: '2020123103',
          status: '发布中',
          name: '销售',
          department: '销售部',
          address: '北京',
          city: '北京',
          time: '2020-12-31',
          end: '2021-02-31',
        },
        {
          number: '2020123104',
          status: '发布中',
          name: '销售',
          department: '销售部',
          address: '上海',
          city: '上海',
          time: '2020-12-31',
          end: '2021-02-31',
        },
        {
          number: '2020123105',
          status: '发布中',
          name: '销售',
          department: '销售部',
          address: '上海',
          city: '上海',
          time: '2020-12-31',
          end: '2021-02-31',
        },
      ],
      el_show: false,
      el_sub: false,

      el_xiu: false,
      number: '',
      status: '',
      name: '',
      department: '',
      address: '',
      city: '',
      time: '',
      end: '',
      position: '',
      newtable: {
        number: '',
        status: '',
        name: '',
        department: '',
        address: '',
        city: '',
        time: '',
        end: '',
        position: '',
      },
      formLabelWidth: '120px',
      newid: 0,

      // 分页
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
    }
  },
  methods: {
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },

    // 查找
    search: function () {
      console.log(this.input)
      this.tableData.map((item) => {
        if (this.input == null || this.input == '') {
          this.tableData = this.searchtableData
          return
        } else if (item.number.includes(this.input)) {
          this.searchs = []
          this.searchs.push(item)
          console.log(this.searchs)
          this.tableData = this.searchs
          console.log(this.tableData)
          return
        }
      })
    },
    // 添加
    adds: function () {
      this.el_show = true
    },
    err: function () {
      this.el_show = false
    },
    // 删除
    removes: function (v) {
      console.log(v.id)
      this.newid = this.tableData.findIndex((item) => {
        return item.id == v.id
      })
      this.$confirm('此操作将永久删除该职位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
          this.tableData.splice(this.newid, 1)
          this.searchtableData = this.tableData
          console.log(this.tableData)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 添加按钮
    pushs: function () {
      if (
        !this.number ||
        !this.status ||
        !this.name ||
        !this.department ||
        !this.address ||
        !this.position ||
        !this.time ||
        !this.end
      ) {
        this.$message.error('内容不能为空')
        return
      }
      let ids =
        Math.max(
          ...this.tableData.map(function (item) {
            return item.id
          })
        ) + 1
      this.tableData.push({
        status: this.status,
        name: this.name,
        department: this.department,
        address: this.address,
        city: this.city,
        time: this.time,
        end: this.end,
        id: ids,
      })
      this.searchtableData = this.tableData
      this.$message({
        message: '创建成功',
        type: 'success',
      })
      ;(this.status = ''),
        (this.name = ''),
        (this.department = ''),
        (this.address = ''),
        (this.city = ''),
        (this.time = ''),
        (this.end = ''),
        (this.el_show = false)
    },
    // 修改按钮
    sets: function (val) {
      this.el_xiu = true

      console.log(val)
      this.newtable = {
        status: val.status,
        name: val.name,
        department: val.department,
        address: val.address,
        city: val.city,
        time: val.time,
        end: val.end,
        id: val.id,
      }
    },
    xg_err: function () {
      this.el_xiu = false
    },

    trueset: function () {
      console.log(this.newtable.time + '===')
      for (var i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].id == this.newtable.id) {
          this.tableData[i].status = this.newtable.status
          this.tableData[i].name = this.newtable.name
          this.tableData[i].department = this.newtable.department
          this.tableData[i].address = this.newtable.address
          this.tableData[i].city = this.newtable.city
          this.tableData[i].time = this.newtable.time
          this.tableData[i].end = this.newtable.end
          this.tableData[i].id = this.newtable.id
          this.el_xiu = false
        }
      }
      this.searchtableData = this.tableData
    },

    subs: function (val) {
      this.el_sub = true
    },

    sub_err: function () {
      this.el_sub = false
    },

    // 发布
    onSubmit() {
      console.log('submit!')
    },
    open1() {
      this.$message({
        message: '信息已保存',
        type: 'success',
      })
    },
    open2() {
      this.$message({
        message: '信息已发布',
        type: 'success',
      })
    },

  },
}
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  top: 300px;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}


/* 全局样式 */
html,body,#app{
    height: 100%;
    margin: 0;
    padding: 0;
}
.el-breadcrumb {
    padding-bottom: 15px;
    font-size: 13px;
}
.el-table {
    margin-top: 15px;
}
.el-pagination {
    margin-top: 15px;
}
.el-carousel {
    margin-top: 15px;
}

</style>